<template>
    <div class="container">
        <!-- 一个视频 -->
        <!-- <div class="content" v-for="(item,index) in list" :key="index" @click="video(index)">
            <div class="img">
                <img :src="item.src" />
            </div>
            <div class="txt">
                <div class="tt">{{item.title}}</div>
                <div class="ct">{{item.content}}</div>
                <div class="time">{{item.time}}</div>
            </div>
        </div> -->
        <div class="content" @click="video">
            <div class="img">
                <img src="/static/img/test4.jpg" />
            </div>
            <div class="txt">
                <div class="tt">牙齿补牙动画</div>
                <div class="ct">制作人:邹景煌</div>
                <div class="time">2019-04-30 12:00</div>
            </div>
        </div>
        <i-load-more tip="没有更多了" :loading="more" />
   </div>
</template>
<script>
export default {
    data() {
        return {
            more:false,
            list:[]
        }
    },
    methods:{
        // video(index) {
        //     wx.navigateTo({
        //         url:'/pages/video/main?title='+this.list[index].title+'&time='+this.list[index].time+'&index='+index,
        //     })
        // }
        video() {
            wx.navigateTo({
                url:'/pages/video/main'
            })
        }
    },
    onLoad() {
        // 使用mock
        var Mock = require('mockjs')    
        var list = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'list|1-3': [{
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                'src|1': [
                    "/static/img/test1.jpg",
                    "/static/img/test2.jpg",
                    "/static/img/test3.jpg",
                    "/static/img/test4.jpg",
                    "/static/img/test5.jpg",
                    "/static/img/test6.jpg",
                    "/static/img/test7.jpg",
                ],
                'title|1':[
                    "牙齿补牙动画",
                    "小知识分享",
                    "保健攻略",
                    "常见疾病",
                    "趣味小视频"
                ],
                'content|1':[
                    "这里是一些详细说明...",
                    "我觉得挺有意思...",
                    "进来看看...",
                    "大家快来看!"
                ],
                'time':function() {
                    return Mock.Random.datetime()
                }
            }]
        })
        // 输出结果
        this.list = list.list
    }
} 
</script>

<style lang='stylus' scoped>
.content
    margin 10rpx 0 
    padding 0 20rpx
    display flex
    justify-content center
    height 240rpx
    background white
    border-top 1px solid #cdcdcd
.content:last-child
    border-bottom 1px solid #cdcdcd
.txt
    margin 20rpx
    padding 0 20rpx
    border-left 1px dashed #cdcdcd
    flex 3
    display flex
    flex-direction column
    position relative
.tt
    font-size 42rpx
.ct
    padding 10rpx 0
    font-size 28rpx
    color #aaaaaa
.time
    position absolute
    bottom -10rpx 
    right -10rpx
    padding 20rpx
    color #dddddd
.img
    flex 2
    width 400rpx
    overflow hidden
    height 200rpx
    margin 20rpx 0
.img img 
    width 100%
    height 100%
</style>
